<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin:0px;
				padding:0px;
			}
			#pic{
				margin:0 auto;
				display:block;
				width:400px;
				height:250px;
			}
			#box{
				width:500px;
				height:50px;
				margin:0 auto;
			}
			#box input{
				width:150px;
				height:50px;
			}
		</style>
		
		<script>
			window.onload=function(){
				var start=document.getElementById("start");
				var end=document.getElementById("end");
				var pic=document.getElementById("pic");
				var timer;
				//用来存储图片的数组
				var picarr=['../../html/上课笔记/lu2.png','img/181.png','img/182.png','img/183.png','img/214.png','img/235.png','img/236.png'];
				start.onclick=function(){
					clearInterval(timer);
					//设置定时器每隔一秒钟换一张图片
					timer=setInterval(function(){
						var num=Math.floor(Math.random()*(picarr.length-1+1-0)+0);
						//将num号的路径设置给图片
						pic.setAttribute('src',picarr[num]);
					},100)
				}
				end.onclick=function(){
					clearInterval(timer);
					var num=Math.random()*10;
					if(num<9){
						pic.setAttribute('src','../../html/上课笔记/lu2.png');
					}
				}
			}
		</script>
	</head>
	<body>
		<div id='box'>
			<input type="button" value='开始抽奖' id='start' />
			<input type="button" value='结束抽奖' id='end' />	
		</div>
		<br /><br />
		<img src="../../html/上课笔记/lu2.png" id='pic' />
		<!--<img src="img/181.png" alt="" />-->
	</body>
</html>
